/*
 * @Author: xianfuyou
 * @Date: 2022-03-29 11:36:35
 * @LastEditors: your name
 * @LastEditTime: 2022-04-11 21:31:28
 * @Description: file content
 */
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ButtonWarpCpn from '../../components/CommBtn/CommBtn'
import ModelCpn from '../../components/OrderCpn/ModelCpn'
import ButtontopLists from '../../components/OrderCpn/ButtontopLists';
import OrderStatusModel from '../../components/OrderCpn/OrderStatusModel'
import DispatchProductModel from '../../components/OrderCpn/DispatchProductModel'
import AccessoryModel from '../../components/OrderCpn/AccessoryModel'
import OrderProductModel from '../../components/OrderCpn/OrderProductModel'
import DelModel from '../../components/OrderCpn/DelModel'
import ReceivePayModel from '../../components/OrderCpn/ReceivePayModel'
import Mypagination from '../../components/myPagination/MyPagination';
import Axios from '../../utils/myAxios'
import moment from 'moment';
import PubSub from 'pubsub-js';
import CreateExcel from 'js-export-excel'

import store from '../../redux/store'
import { getOrderListsAction, getAllPriceAction } from '../../redux/action/orderAction/orderAction'

import {
  Row,
  Col,
  Form,
  Input,
  Radio,
  Select,
  DatePicker,
  Table,
  Tag,
  message
} from 'antd'
import { SettingOutlined, PlusCircleFilled, DeleteFilled, EditFilled, PrinterFilled, PlusCircleOutlined, CloudDownloadOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
import './OrderManage.css'

// 订单管理
function OrderManage() {
  // const baseUrl = 'http://139.155.237.161:8080'
  // 订单列表数据
  const [orderLists, setOrderLists] = useState([])
  // 分页的数据  // 总条数
  const [page, setPage] = useState(1)
  const [size, setSize] = useState(5)
  const [count, setCount] = useState(null)
  const [nowStatus, setNowStatus] = useState(null)

  //  汇总订单 已收款 欠款 
  const [priceAll, setPriceAll] = useState({
    payAll: null,
    onPay: null,
    unOnPay: null
  })

  // 顶部按钮列表
  const [orderBtnLists, setOrderBtnLists] = useState([
    {
      id: 0,
      text: "订单列表",
      key: 'orderCount',
      count: 2,
    },
    {
      id: 1,
      text: "今日新增",
      key: 'dayCount',
      count: 2,
    },
    {
      id: 2,
      text: "本周新增",
      key: 'weekCount',
      count: 2,
    },
    {
      id: 3,
      text: "本月新增",
      key: 'monthCount',
      count: 2,
    },
  ])
  // 导出为excel
  const [outPutflag, setoutPutflag] = useState(false)
  // 普通搜索
  const [commSearchVal, setCommSearchVal] = useState(null)
  // 是否显示高级搜索
  const [isHighSearch, setIsHighSearch] = useState(false)
  // 保存当前订单的值
  const [orderNowVal, setOrderNowVal] = useState({})
  // 自定义字段弹窗是否显示
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 订单状态model框
  const [isOrderStatusModel, setIsOrderStatusModel] = useState(false)
  // 发货状态model框
  const [isOrderProductModel, setIsOrderProductModel] = useState(false)
  // 控制备注显示隐藏model框
  const [remarkState, setRemarkState] = useState(false)
  // 控制附件显示隐藏model框
  const [accessoryState, setAccessoryState] = useState(false)
  // 控制订单商品的显示隐藏model框
  const [orderProduct, setOrderProduct] = useState(false)
  // 控制删除订单显示隐藏model框
  const [delProduct, setDelProduct] = useState(false)
  // 控制删除订单显示隐藏model框
  const [payMoney, setPayMoney] = useState(false)
  // 请求json数据
  let requestJson = {
    page: page,
    limit: size,
    status: nowStatus,
    constantCondition: commSearchVal
  }
  // 跳转路由控件
  const navigate = useNavigate()

  useEffect(() => {
    // getOrderLists({ page: page, limit: size, status: nowStatus })
    getAllOrderCount()
    store.dispatch(getOrderListsAction(requestJson))
    // 用来监听redux中store的改变
    let fn = store.subscribe(() => {
      setOrderLists(store.getState().orderReducer.orderLists)
      setCount(store.getState().orderReducer.count)
    })
    return () => {
      fn()
    }
  }, [page, size, nowStatus, count])

  useEffect(() => {
    store.dispatch(getAllPriceAction())
    let fn = store.subscribe(() => {
      setPriceAll(store.getState().orderReducer.allPrice)
    })
    return () => {
      fn()
    }
  }, [])

  // 点击备注显示全部
  const isShowRemork = () => {
    setRemarkState(!remarkState)
  }

  const roderOrder = (obj) => {
    return <>
      <span style={{ "marginRight": "5px" }}>备注</span>
      {obj ?
        <ButtonWarpCpn onClick={isShowRemork} size="small" bgcolor="#c9c9c9">已省略</ButtonWarpCpn> :
        <ButtonWarpCpn onClick={isShowRemork} size="small" bgcolor="#52a069">显示全部</ButtonWarpCpn>}
    </>
  }

  const renderRoder = (message, state) => {
    if (message && message.length > 1 && state) {
      return message.substring(0, 1) + '...'
    } else {
      return message
    }
  }

  // 转换时间戳
  const getDate = (date) => {
    let res = moment(date).format("YYYY-MM-DD")
    return res
  }

  const ordertable = [
    {
      title: '客户名称',
      dataIndex: 'customer',
      key: 'customer',
      // fixed: 'left',
      width: 80,
      render: customer => <a>{customer.customerUsername}</a>
    },
    {
      title: '订单编号',
      dataIndex: 'orderNumber',
      key: 'orderNumber',
      width: 110,
      render: (orderNumber, record) => <a onClick={() => { viewOrder(record) }}>{orderNumber}</a>
    },
    {
      title: '联系人',
      dataIndex: 'customer',
      key: 'customer',
      width: 80,
      render: (customer) => <>{customer.customerName}</>
    },
    {
      title: '下单日期',
      dataIndex: 'orderDate',
      key: 'orderDate',
      width: 150,
      render: (orderDate) => <>{getDate(orderDate)}</>
    },
    {
      title: '交单日期',
      dataIndex: 'surrenderDocumentsDate',
      key: 'surrenderDocumentsDate',
      width: 150,
      render: (surrenderDocumentsDate) => <>{getDate(surrenderDocumentsDate)}</>
    },
    {
      title: '订单总金额',
      dataIndex: 'orderAmount',
      key: 'orderAmount',
      width: 90,
    },
    {
      title: '已收款',
      dataIndex: 'collectMoney',
      key: 'collectMoney',
      width: 60,
    },
    {
      title: '欠款',
      dataIndex: 'unPayOver',
      key: 'unPayOver',
      width: 60,
      render: (unPayOver, record) => <>{record.orderAmount - record.collectMoney}</>
    },
    {
      title: '订单状态',
      dataIndex: 'orderStatus',
      key: 'orderStatus',
      width: 80,
      render: (orderStatus, record) => {
        // console.log('record',record)
        const temp = orderStatus === 0 ? <Tag onClick={() => { changeOrderStatus(record) }} color="#e0405a">未处理</Tag> :
          orderStatus === 1 ? <Tag onClick={() => { changeOrderStatus(record) }} color="#33bbee">处理中</Tag> :
            <Tag onClick={() => { changeOrderStatus(record) }} color="#009966">已完成</Tag>
        return temp
      }
    },
    {
      title: '发货状态',
      dataIndex: 'deliveryStatus',
      key: 'deliveryStatus',
      width: 80,
      render: (deliveryStatus, record) => {
        // console.log('record', record)
        const temp = deliveryStatus === 0 ? <Tag onClick={() => { changeOrderProduct(record) }} color="#e0405a">未发货</Tag> :
          <Tag onClick={() => { changeOrderProduct(record) }} color="#009966">已发货</Tag>
        return temp
      }
    },
    {
      title: '收货人',
      dataIndex: 'consignee',
      key: 'consigneeName',
      width: 70,
      render: (consignee) => <>{consignee.consigneeName}</>
    },
    {
      title: '收货人电话',
      dataIndex: 'consignee',
      key: 'consigneePhone',
      width: 100,
      render: (consignee) => <>{consignee.consigneePhone}</>
    },
    {
      title: '收货人地址',
      dataIndex: 'consignee',
      key: 'consigneeAddress',
      width: 200,
      render: (consignee) => <>{consignee.consigneeAddress || "暂无数据"}</>
    },
    {
      title: roderOrder(remarkState),
      dataIndex: 'remarks',
      key: 'remarks',
      render: (remarks) => {
        return renderRoder(remarks, remarkState)
      }
    },
    {
      title: '业务员',
      dataIndex: 'employee',
      key: 'employee',
      width: 80,
      render: (employee) => <>{employee.name}</>
    },
    {
      title: '录入时间',
      dataIndex: 'createDate',
      key: 'createDate',
      width: 80,
      render: (createDate) => <>{getDate(createDate)}</>
    },
    {
      title: '附件',
      dataIndex: 'orderEnclosureList',
      key: 'orderEnclosureList',
      width: 80,
      render: (orderEnclosureList, record) => {
        const temp = orderEnclosureList.length === 0 ?
          <ButtonWarpCpn onClick={() => { changeAccessory(record) }} size="small" bgcolor="#dddddd">无附件</ButtonWarpCpn> :
          <ButtonWarpCpn onClick={() => { changeAccessory(record) }} size="small" bgcolor="#488dc9">附件<span>({orderEnclosureList.length})</span></ButtonWarpCpn>
        return temp
      }
    },
    {
      title: '订单商品',
      dataIndex: 'commodityList',
      key: 'commodityList',
      width: 80,
      render: (commodityList, record) => {
        return <>
          {commodityList === null || commodityList.length === 0 ?
            <ButtonWarpCpn onClick={() => { changeOrderGoods(record) }} size="small" bgcolor="#dddddd">暂无商品</ButtonWarpCpn> :
            <ButtonWarpCpn onClick={() => { changeOrderGoods(record) }} size="small" bgcolor="#ff6633">订单商品<span>(1)</span></ButtonWarpCpn>}
        </>
      }
    },
    {
      title: '管理',
      key: 'orderManager',
      width: 300,
      render: (orderManager, record) => {
        return <Col className="managerBtn">
          <ButtonWarpCpn onClick={() => { changePayMoney(record) }} size="small" bgcolor="#009966" icon={<PlusCircleFilled />}>到款</ButtonWarpCpn>
          <ButtonWarpCpn size="small" bgcolor="#bd804b" icon={<PrinterFilled />}>打印</ButtonWarpCpn>
          <ButtonWarpCpn onClick={() => { changeModify(record) }} size="small" bgcolor="#3782c3" icon={<EditFilled />}>修改</ButtonWarpCpn>
          <ButtonWarpCpn onClick={() => { changeDelOrder(record) }} size="small" bgcolor="#ff0000" icon={<DeleteFilled />}>删除</ButtonWarpCpn>
        </Col>
      },
    },
  ]

  // 获取订单列表数据方法
  const getOrderLists = (json) => {
    console.log(json)
    Axios.post('/order/findOrderAll', json,
      { headers: { 'Content-Type': 'application/json' } }).then(res => {
        console.log(res)
        if (res.data.code === 200 && res.data.data) {
          const { count, orderList } = res.data.data
          let newOrderList = orderList.map((item) => {
            item['key'] = item.id
            return item
          })
          console.log('newOrderList', newOrderList)
          setCount(count)
          setOrderLists(newOrderList)
        } else {
          setCount(0)
          setOrderLists([])
        }
      }).catch(err => {
        console.log(err)
      })

    // setOrderLists(
    //   [{
    //     key: '1',
    //     clientName: `xianfuyou`,
    //     orderId: `DD2022033009225`,
    //     service: `客服1`,
    //     downOrder: `2022-03-30 15:12:11`,
    //     overOrder: `2022-03-30`,
    //     salePriceAll: `900`,
    //     payOver: `0`,
    //     unPayOver: `900`,
    //     orderStatus: 1, //0 未处理 1 处理中 2 已完成
    //     putawayStatus: 1, // 0 未发货 1 已发货
    //     putawayPerson: `Edrward`,
    //     putawayPersonPhone: `Edrward 213`,
    //     putawayAddress: `Edrward 213`,
    //     remark: `EdrwardEdrwardEdrwardEdrwardEd213`,
    //     salesman: `超级管理员`,
    //     inputTime: `Edrward 213`,
    //     accessory: [{
    //       uid: '1',
    //       name: 'xxx.png',
    //       status: 'done',
    //       response: 'Server Error 500', // custom error message to show
    //       url: 'http://www.baidu.com/xxx.png',
    //     }, {
    //       uid: '2',
    //       name: 'xxx.png',
    //       status: 'done',
    //       response: 'Server Error 500', // custom error message to show
    //       url: 'http://www.baidu.com/xxx.png',
    //     }],
    //     orderProduct: [{
    //       key: 1,
    //       id: 1,
    //       goodsName: `可乐`,
    //       size: ``,
    //       type: ``,
    //       cost: `50`,
    //       salePrice: '100',
    //       count: `200`,
    //       discount: '13135',
    //       priceAll: `1231`,
    //       remark: `212312312sadasd`,
    //       enterTime: `2022-03-30`,
    //     }],
    //     orderManager: `Edrward 213`,
    //   }, {
    //     key: '2',
    //     clientName: `xianfuyou`,
    //     orderId: `DD2022033009225`,
    //     service: `客服1`,
    //     downOrder: `2022-03-30 15:12:11`,
    //     overOrder: `2022-03-30`,
    //     salePriceAll: `900`,
    //     payOver: `0`,
    //     unPayOver: `900`,
    //     orderStatus: 0, //0 未处理 1 处理中 2 已完成
    //     putawayStatus: 0, // 0 未发货 1 已发货
    //     putawayPerson: `Edrward`,
    //     putawayPersonPhone: `Edrward 213`,
    //     putawayAddress: `Edrward 213`,
    //     remark: `EdrwardEdr 213`,
    //     salesman: `普通管理员`,
    //     inputTime: `Edrward 213`,
    //     accessory: [],
    //     orderProduct: [{
    //       key: 1,
    //       id: 1,
    //       goodsName: `可乐`,
    //       size: ``,
    //       type: ``,
    //       cost: `50`,
    //       salePrice: '100',
    //       count: `200`,
    //       discount: '13135',
    //       priceAll: `1231`,
    //       remark: `212312312sadasd`,
    //       enterTime: `2022-03-30`,
    //     }, {
    //       key: 2,
    //       id: 2,
    //       goodsName: `雪碧`,
    //       size: ``,
    //       type: ``,
    //       cost: `50`,
    //       salePrice: '123',
    //       count: `200`,
    //       discount: '13135',
    //       priceAll: `1231`,
    //       remark: `212312312sadasd`,
    //       enterTime: `2022-03-30`,
    //     }],
    //     orderManager: `Edrward 213`,
    //   }]
    // )
  }

  // 计算汇总统计数据
  const getAllPrice = () => {
    console.log('getAllPrice')
    Axios.get('/order/findOrderTabulateStatistics')
      .then(res => {
        console.log(res)
        if (res.data.code === 200 && res.data.data) {
          const { orderMoney, collectMoney, arrearsMoney } = res.data.data
          console.log(orderMoney, collectMoney, arrearsMoney)
          setPriceAll(Object.assign({}, priceAll, { payAll: orderMoney, onPay: collectMoney, unOnPay: arrearsMoney }))
        }
      }).catch(err => {
        console.log(err)
      })
  }

  // 查询新增订单的数量（按今日、本周、本月、所有）
  const getAllOrderCount = () => {
    Axios.get('/order/findOrderCount').then(res => {
      console.log(res)
      if (res.data.code === 200 && res.data.data) {
        const { orderCount, dayCount, weekCount, monthCount } = res.data.data
        for (const item of orderBtnLists) {
          switch (item.key) {
            case 'orderCount':
              item.count = orderCount
              break;
            case 'dayCount':
              item.count = dayCount
              break;
            case 'weekCount':
              item.count = weekCount
              break;
            case 'monthCount':
              item.count = monthCount
              break;
            default:
              break
          }
        }
        setOrderBtnLists([...orderBtnLists])
      }
    }).catch(err => {
      console.log(err)
    })
  }

  // 弹窗内容
  const showModal = () => {
    // setIsModalVisible(true);
    console.log(store.getState().orderList)
  };
  // 点击自定义设置弹窗确定
  const handleOk = (res) => {
    setIsModalVisible(res);
  }
  // 点击自定义设置弹窗取消
  const handleCancel = (res) => {
    setIsModalVisible(res);
  }

  // 订单状态的弹窗事件
  const changeOrderStatus = (orderVal) => {
    // console.log('orderVal', orderVal)
    setOrderNowVal(orderVal)
    setIsOrderStatusModel(true)
  }

  // 发货状态的弹窗事件
  const changeOrderProduct = (orderVal) => {
    // console.log('orderVal', orderVal)
    setOrderNowVal(orderVal)
    setIsOrderProductModel(true)
  }

  // 附件弹窗的事件
  const changeAccessory = (orderVal) => {
    setOrderNowVal(orderVal)
    setAccessoryState(true)
  }

  // 订单商品弹窗的事件
  const changeOrderGoods = (orderVal) => {
    setOrderNowVal(orderVal)
    setOrderProduct(true)
  }
  // 订单删除
  const changeDelOrder = (orderVal) => {
    setOrderNowVal(orderVal)
    setDelProduct(true)
  }
  // 订单到款
  const changePayMoney = (orderVal) => {
    setOrderNowVal(orderVal)
    setPayMoney(true)
  }
  // 订单修改
  const changeModify = (orderVal) => {
    // setOrderNowVal(orderVal)
    navigate('/order/modifyOrder', { state: { orderInfo: orderVal } })
  }


  // 获取当前点击的顶部按钮的数据
  const getOrderNowLists = (res) => {
    console.log('getOrderNowLists', res)
    if (res === 0) {
      setNowStatus(null)
    } else {
      setNowStatus(res)
    }
  }

  // 普通输入框
  const commSearchInput = (e) => {
    let inputVal = e.target.value
    // console.log(inputVal)
    setCommSearchVal(inputVal)
  }

  // 普通搜索
  const commSearch = () => {
    console.log('commSearchVal', commSearchVal)
    if (commSearchVal !== "") {
      setNowStatus(4)
    } else {
      setNowStatus(null)
    }
    setCommSearchVal(null)
  }
  // 定位表单控件
  const formRef = useRef(null)
  // 显示隐藏表单
  const showHiddenForm = () => {
    setIsHighSearch(!isHighSearch)
  }
  // 表单部分
  // 提交表单获取表单内容
  const onFinish = (values) => {
    setoutPutflag(true)
    const resValues = {
      ...values,
      "overOrderStart": values['overOrderStart'] && values['overOrderStart'].format('YYYY-MM-DD HH:mm:ss'),
      "overOrderEnd": values['overOrderEnd'] && values['overOrderEnd'].format('YYYY-MM-DD HH:mm:ss'),
      "downOrderStart": values['downOrderStart'] && values['downOrderStart'].format('YYYY-MM-DD HH:mm:ss'),
      "downOrderEnd": values['downOrderEnd'] && values['downOrderEnd'].format('YYYY-MM-DD HH:mm:ss')
    }
    console.log('resValues', resValues);
  };
  // 重置表单
  const onReset = () => {
    formRef.current.resetFields();
  };

  // 是否数据导出
  const onOutput = () => {
    if (outPutflag) {
      getOrderPutAway()
    }
  }

  // 调用数据导出得接口
  const getOrderPutAway = () => {
    let orderPutExcel = []
    orderLists.forEach(item => {
      orderPutExcel.push(item.id)
    })
    Axios.get('/order/findInduceById',
      { params: { idList: orderPutExcel.join(','), id: 2 } }).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          message.success('数据导出成功')
          // 前端导出为excel
          let rowdata = orderLists;
          let option = {};
          let dataTable = [];
          option.fileName = '订单管理';  //excel文件名称

          rowdata.map(v => {
            dataTable.push({
              '客户名称': v.customer.customerUsername,
              '订单编号': v.orderNumber,
              '联系人': v.customer.customerName,
              '下单日期': getDate(v.orderDate),
              '交单日期': getDate(v.surrenderDocumentsDate),
              '订单总金额': v.orderAmount,
              '已收款': v.collectMoney,
              '欠款': v.orderAmount - v.collectMoney,
              '订单状态': v.orderStatus === 0 ? '未处理' : v.orderStatus === 1 ? '处理中' : '已完成',
              '发货状态': v.deliveryStatus === 0 ? '未发货' : "已发货",
              '收货人': v.consignee.consigneeName,
              '收货人电话': v.consignee.consigneePhone,
              '收货人地址': v.consignee.consigneeAddress || "暂无地址",
              '备注': v.remarks,
              '业务员': v.employee.name,
              '录入时间': getDate(v.createDate),
            })
          });
          option.datas = [
            {
              sheetData: dataTable,
              sheetName: 'sheet',
              sheetFilter: [
                '客户名称',
                '订单编号',
                '联系人',
                '下单日期',
                '交单日期',
                '订单总金额',
                '已收款',
                '欠款',
                '订单状态',
                '发货状态',
                '收货人',
                '收货人电话',
                '收货人地址',
                '备注',
                '业务员',
                '录入时间',
              ],
              sheetHeader: ['客户名称',
                '订单编号',
                '联系人',
                '下单日期',
                '交单日期',
                '订单总金额',
                '已收款',
                '欠款',
                '订单状态',
                '发货状态',
                '收货人',
                '收货人电话',
                '收货人地址',
                '备注',
                '业务员',
                '录入时间',],
            }
          ];
          let toExcel = new CreateExcel(option);
          toExcel.saveExcel()
        } else {
          message.error('数据导出失败')
        }
      })
  }
  // 查看当前订单
  const viewOrder = (record) => {
    console.log(record)
    navigate('/order/viewOrder', { state: { orderInfo: record } })
  }

  // 切换页码
  const changePage = (res) => {
    // console.log('新页码', res)
    setPage(res)
  }

  return (
    <div className="order">
      {/* 自定义设置弹出层 */}
      <ModelCpn isShow={isModalVisible} pHandleOk={handleOk} pHandleCancel={handleCancel}></ModelCpn>
      {/* 订单状态弹出层 */}
      <OrderStatusModel requestJson={requestJson} nowStatus={orderNowVal} isShow={isOrderStatusModel} pHandleOk={(res) => { setIsOrderStatusModel(res) }} pHandleCancel={(res) => { setIsOrderStatusModel(res) }}></OrderStatusModel>
      {/* 订单发货弹出层 */}
      <DispatchProductModel
        requestJson={requestJson}
        nowStatus={orderNowVal}
        // {...orderNowVal} 当同时为结构会造成key值不唯一
        isShow={isOrderProductModel}
        pHandleOk={(res) => { setIsOrderProductModel(res) }}
        pHandleCancel={(res) => { setIsOrderProductModel(res) }}>
      </DispatchProductModel>
      {/* 附件弹出层 */}
      <AccessoryModel  requestJson={requestJson} nowId={orderNowVal.id} nowStatus={orderNowVal.orderEnclosureList} isShow={accessoryState} pHandleOk={(res) => { setAccessoryState(res) }} pHandleCancel={(res) => { setAccessoryState(res) }}></AccessoryModel>
      {/* 订单商品弹出层 */}
      <OrderProductModel nowOrderId={orderNowVal.key} isShow={orderProduct} pHandleOk={(res) => { setOrderProduct(res) }} pHandleCancel={(res) => { setOrderProduct(res) }}></OrderProductModel>
      {/* 订单删除弹出层 */}
      <DelModel requestJson={requestJson} getAllPrice={getAllPrice} orderId={orderNowVal.id} isShow={delProduct} pHandleOk={(res) => { setDelProduct(res) }} pHandleCancel={(res) => { setDelProduct(res) }}></DelModel>
      {/* 新增到款弹出层 */}
      <ReceivePayModel requestJson={requestJson} nowOrder={orderNowVal} isShow={payMoney} pHandleOk={(res) => { setPayMoney(res) }} pHandleCancel={(res) => { setPayMoney(res) }}></ReceivePayModel>
      {/* 顶部导航及搜索 */}
      <Row justify={'space-between'} align={'middle'} className={'top'}>
        <Col span={16}>
          <Row align={'middle'}>
            {/* 顶部左侧按钮 */}
            <Col className="buttonTopLeft">
              <ButtontopLists
                getOrderNowLists={getOrderNowLists}
                lists={orderBtnLists}></ButtontopLists>
              <ButtonWarpCpn bgcolor="#5c7b9a" icon={<CloudDownloadOutlined />} onClick={() => { setIsHighSearch(true) }}>数据导出</ButtonWarpCpn>
              <ButtonWarpCpn bgcolor="#149e83" icon={<PlusCircleOutlined />} onClick={() => { navigate('/order/addOrderComm') }}>新增订单</ButtonWarpCpn>
            </Col>
            {/* 自定义设置 */}
            <Col className="buttonTopSet">
              <ButtonWarpCpn bgcolor="#e63636" onClick={showModal} icon={<SettingOutlined />}>自定义设置</ButtonWarpCpn>
            </Col>
          </Row>
        </Col>
        <Col span={8}>
          <Row justify={'end'} align={"middle"}>
            {/* 顶部右侧选择框 */}
            <Col className="inputTopSearch">
              <Input value={commSearchVal} onChange={(e) => { commSearchInput(e) }} placeholder="客户名称 手机号 订单" title="客户名称 手机号 跟单" />
            </Col>
            <Col className="buttonTopRight">
              <ButtonWarpCpn bgcolor="#2396b2" onClick={() => { commSearch() }}>搜索</ButtonWarpCpn>
              {/* 切换搜索状态 */}
              {
                isHighSearch ?
                  <ButtonWarpCpn bgcolor="#cc2626" onClick={() => { showHiddenForm() }}>高级搜索<UpOutlined /></ButtonWarpCpn> :
                  <ButtonWarpCpn bgcolor="#cc2626" onClick={() => { showHiddenForm() }}>高级搜索<DownOutlined /></ButtonWarpCpn>
              }
            </Col>
          </Row>
        </Col>
      </Row>
      {/* 高级搜索表单部分 */}
      {
        isHighSearch ? (
          <Row className={'highFrom'}>
            <Col className={"flag"} span={24}>
              <Row justify={'space-between'} align={'middle'}>
                <Col span={24}>
                  <Form
                    labelCol={{
                      span: 8,
                    }}
                    wrapperCol={{
                      span: 16,
                    }}
                    ref={formRef} name="control-ref" onFinish={onFinish}
                  >
                    {/* 高级搜索表单部分 */}
                    <Row className="fromDataSection" justify={'space-around'}>
                      <Col span={6}>
                        <Form.Item label="编号" name="id">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="订单" name="orderId">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="交单日期" style={{ marginBottom: 0 }}>
                          <Form.Item name="overOrderStart"
                            style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
                          >
                            <DatePicker size="small" />
                          </Form.Item>
                          <span
                            style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
                          >
                            -
                          </span>
                          <Form.Item name="overOrderEnd" style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
                            <DatePicker size="small" />
                          </Form.Item>
                        </Form.Item>
                        <Form.Item label="收货人电话" name="putawayPersonPhone">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="发货状态" name="dispatchStatus">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                      </Col>
                      <Col span={6}>
                        <Form.Item label="客户名称" name="clientName">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="订单商品" name="orderProduct">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="订单状态" name="orderStatus">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                        <Form.Item label="收货人地址" name="putawayPersonAddress">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="是否欠款" name="isDebt">
                          <Radio.Group>
                            <Radio value="0">未知</Radio>
                            <Radio value="1">有</Radio>
                            <Radio value="2">无</Radio>
                          </Radio.Group>
                        </Form.Item>
                      </Col>
                      <Col span={6}>
                        <Form.Item label="客服" name="service">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="下单日期" style={{ marginBottom: 0 }}>
                          <Form.Item name="downOrderStart"
                            style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
                          >
                            <DatePicker size="small" />
                          </Form.Item>
                          <span
                            style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
                          >
                            -
                          </span>
                          <Form.Item name="downOrderEnd" style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
                            <DatePicker size="small" />
                          </Form.Item>
                        </Form.Item>
                        <Form.Item label="收货人" name="putawayPerson">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="备注" name="remark">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="业务员" name="salesman">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                      </Col>
                    </Row>
                    {/* 按钮部分 */}
                    <Row className="formSearch" justify={'center'} align={'middle'}>
                      <Col>
                        <Form.Item>
                          {/* 高级搜索处理部分 */}
                          <Col className="formSearchItem">
                            <ButtonWarpCpn bgcolor="#49b377" type="primary" htmlType="submit">立即搜索</ButtonWarpCpn>
                            <ButtonWarpCpn bgcolor="#505050" htmlType="button" onClick={onReset}>清空条件</ButtonWarpCpn>
                            <ButtonWarpCpn bgcolor={outPutflag ? "#448aca" : "#b1b3b2"} htmlType="button" onClick={onOutput}>导出数据</ButtonWarpCpn>
                          </Col>
                        </Form.Item>
                      </Col>
                    </Row>
                  </Form>
                </Col>
              </Row>
            </Col>
          </Row>
        ) : <></>
      }
      {/* 表格部分内容 */}
      <Row className="tableMessage">
        <Col span={24}>
          <Table
            pagination={false}
            /* 
            {
              defaultCurrent: 2,
              pageSize: 5,
              showSizeChanger: true,
              pageSizeOptions: [2, 3, 4, 5]
            }
            */
            size="small"
            columns={ordertable}
            dataSource={orderLists}
            scroll={{ x: 2300 }} />
        </Col>
      </Row>
      {/* 总计订单数量部分 */}
      <Row justify={"center"} className={'buttomTotal'}>
        <Col>
          <span>汇总统计</span>
          <span>订单总金额：{priceAll.payAll}</span>
          <span>已收款：{priceAll.onPay}</span>
          <span>欠款：{priceAll.unOnPay}</span>
        </Col>
      </Row>
      {/* 分页模块 */}
      <Row justify={'end'} align={'middle'}>
        <Mypagination page={page} size={size} count={count} changePage={changePage}></Mypagination>
      </Row>
    </div>
  )
}

export default OrderManage